<template>
  <div :class="treeStore.isShowStrategyDetail ? 'not-click' : ''">
    <div class="setting-box">
      <el-row class="pl-8 py-2.5 setting-title-color"> 防护设置 </el-row>
      <el-row>
        <el-col class="setting-title">防护类型:</el-col>
        <el-col :span="20" class="mt-1.5">
          <template v-for="(item, index) in checkObj">
            <el-checkbox
              v-model="item.checked"
              :label="item.label"
              class="mr-2.5"
              @click="setProtection(item.name, !item.checked)"
            />
          </template>
          
        <el-col class="tagging mt-1 mb-3" :span="16">注:根据选择类型进行应用防护</el-col>
        </el-col>
      </el-row>
      <template v-for="(sItem, sIndex) in switchObj">
        <el-row class="pb-0.5">
          <el-col class="setting-title">{{ sItem.label+':' }}</el-col>
          <el-col :span="16" class="tagging">
            <el-switch
              v-model="sItem.checked"
              size="large"
              @click="setProtection(sItem.name, sItem.checked)"
            />
            <span class="ml-2.5">{{ sItem.tip }}</span>
          </el-col>
        </el-row>
      </template>
      <el-row class="pl-8 mt-3.5 font-bold text-base" v-if="false"> 病毒查杀设置 </el-row>
      <el-row class="pt-2.5" v-if="false">
        <el-col class="setting-title" :span="5">病毒查杀:</el-col>
        <el-col :span="16">
          <el-switch
            v-model="viusSwitch"
            size="large"
            @click="setProtection('app_def_vius', String(Number(viusSwitch)))"
          />
        </el-col>
      </el-row>
      <el-row v-if="false">
        <el-col class="setting-title">数据目录:</el-col>
        <div class="flex items-center">
          <div class="tag-box mr-2.5 mt-3">
            <el-tag
              v-for="(tag, index) in dataDir"
              :key="index"
              :closable="true"
              type="info"
              @close="closeDataDir"
            >
              {{ tag }}
            </el-tag>
          </div>
          <el-button @click="browsingDir">浏览目录</el-button>
        </div>
      </el-row>
      <el-row class="pt-2" v-if="false">
        <el-col class="setting-title">例外目录:</el-col>
        <div class="flex items-center">
          <div class="tag-box mr-2.5 mb-5 mt-3">
            <el-tag
              v-for="(exp, index) in expDir"
              :key="index"
              :closable="true"
              type="info"
              class="mr-2.5"
              @close="closeExpDir(index)"
            >
              {{ exp }}
            </el-tag>
          </div>
          <el-button @click="exceptionDir">浏览目录</el-button>
          <p class="ml-2.5 tagging">注:如果选择相同目录，则只保留其中的一个</p>
        </div>
      </el-row>
    </div>
    <DirectoryDialog
      ref="protectionDirRef"
      :urlType="1"
      :dirFlag="true"
      :multipleChoice="multipleChoice"
      :os="treeStore.osType"
      @handleDialogButton="handleDialogButton"
    ></DirectoryDialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch, markRaw, nextTick } from "vue";
import {
  req_getSystemConfig,
  req_setSystemConfig,
} from "~/utils/axios/programWhitelist.js";
import { useTreeStore } from "~/utils/pinia/tree.js";
import DirectoryDialog from "~/components/common/DirectoryDialog.vue";
import { eventBus } from "~/utils/common/eventBus.js";
eventBus.on("getStrategyDetail", (detail) => {
  let res = {
    data: {
      data: detail.data,
    },
  };
  setResultFn(res);
});
import { ElMessage } from "element-plus";
const successElMessage = () => {
  ElMessage({
    message: "修改成功",
    type: "success",
  });
};
// 目录选择ref
const protectionDirRef = ref();
// 目录选择单双选
const multipleChoice = ref(false);
// 树形组件pinia注册
const treeStore = useTreeStore();
let checkObj = reactive([
  { name: "app_def_exe", checked: false, label: "EXE" },
  { name: "app_def_bat", checked: false, label: "BAT" },
  { name: "app_def_vbs", checked: false, label: "VBS" },
  { name: "app_def_cmd", checked: false, label: "CMD" },
  { name: "app_def_reg", checked: false, label: "REG" },
  { name: "app_def_msc", checked: false, label: "MSC" },
  { name: "app_def_msi", checked: false, label: "MSI" },
  { name: "app_def_cpl", checked: false, label: "CPL" },
  { name: "app_def_fon", checked: false, label: "FON" },
  { name: "app_def_wsh", checked: false, label: "WSH" },
  { name: "app_def_ps1", checked: false, label: "PS1" },
  { name: "app_def_wsf", checked: false, label: "WSF" },
]);
let switchObj = reactive([
  {
    name: "app_def_cert",
    label: "数字签名",
    checked: false,
    tip: "注:开启后带合法签名的程序自动放行",
  },
  { name: "app_def_reg32", label: "控件注册", checked: false },
  { name: "app_def_sc", label: "服务注册", checked: false },
  {
    name: "trustProcess",
    label: "信任进程",
    checked: false,
    tip: "注:开启后带合法签名的程序自动放行",
  },
]);
let viusSwitch = ref(false);
let dataDir = reactive([]);
let expDir = ref([]);
let queryArr = [
  "app_def_exe",
  "app_def_bat",
  "app_def_vbs",
  "app_def_cmd",
  "app_def_reg",
  "app_def_msc",
  "app_def_msi",
  "app_def_cpl",
  "app_def_fon",
  "app_def_wsh",
  "app_def_ps1",
  "app_def_wsf",
  "app_def_cert",
  "app_def_reg32",
  "app_def_sc",
  "trustProcess",
  "app_def_vius",
  "virus_dir",
  "exp_virus_dir",
];

const setResultFn = (res) => {
  // if (!res.data.data) {
    checkObj.map((checkItem) => {
        checkItem.checked = false;

    });
    switchObj.map((switchItem) => {
        switchItem.checked = false;
    });
    // dataDir = [];
    // expDir = [];
    viusSwitch.value = false;
    // return;
  // }
  let arr = res.data.data;
  dataDir.splice(0, dataDir.length);
  expDir.value = [];
  // debugger
  // checkObj
  console.log(expDir.value)
  for (let i = 0; i < arr.length; i++) {
    // check组件数据
    checkObj.map((checkItem) => {
      if (checkItem.name == Object.keys(arr[i])[0]) {
        checkItem.checked = Boolean(Number(arr[i][Object.keys(arr[i])[0]]));
        return "stop";
      }
    });
    // switch组件数据
    switchObj.map((switchItem) => {
      if (switchItem.name == Object.keys(arr[i])[0]) {
        switchItem.checked = Boolean(Number(arr[i][Object.keys(arr[i])[0]]));
        return "stop";
      }
    });
    if ("virus_dir" == Object.keys(arr[i])[0]) {
      arr[i][Object.keys(arr[i])[0]].split(";").map((virusItem) => {
        if (virusItem != "0" && virusItem != "") {
          dataDir.push(virusItem);
        }
      });
    }
    if ("exp_virus_dir" == Object.keys(arr[i])[0]) {
      arr[i][Object.keys(arr[i])[0]].split(";").map((expItem) => {
        if (expItem != "") {
          expDir.value.push(expItem);
        }
      });
    }
    if ("app_def_vius" == Object.keys(arr[i])[0]) {
      viusSwitch.value = Boolean(Number(arr[i][Object.keys(arr[i])[0]]))
    }
  }
  console.log(expDir.value)
};

const setProtection = (key, value) => {
  if (!treeStore.treeDeviceId) {
    ElMessage.error("未选择设备,请选择左侧分组中的设备");
    return;
  }
  let setParams = [
    {
      key: key,
      value: typeof value === "boolean" ? String(Number(value)) : value,
    },
  ];
  req_setSystemConfig(treeStore.treeDeviceId, setParams).then(
    (res) => {
      successElMessage();
      if (!treeStore.treeDeviceId) {
        return;
      }
      req_getSystemConfig(treeStore.treeDeviceId, queryArr).then((res) => {
        setResultFn(res);
      });
    },
    (err) => {
      ElMessage.error(err);
    }
  );
};

const browsingDir = () => {
  if (dataDir.length <= 0) {
    treeStore.directoryDialogVModel = true;
    multipleChoice.value = false;
  } else {
    ElMessage.error("只能选择一个目录，当前已选择一个，请先移除");
  }
};
const exceptionDir = () => {
  if (expDir.value.length < 3) {
    treeStore.directoryDialogVModel = true;
    multipleChoice.value = true;
  } else {
    ElMessage.error("最多只能选择三个目录，当前已选择三个，请先移除");
  }
};
const handleDialogButton = (ref, path) => {
  if (multipleChoice.value) {
    if (expDir.value.length + path.length > 3) {
      ElMessage.error("最多只能选择三个目录，当前选择已超过三个，请重新选择");
      return;
    }
    path.map((item) => {
      expDir.value.push(item.split(/\\\\/g).join("\\"));
    });
    expDir.value = [...new Set(expDir.value)];
    setProtection("exp_virus_dir", expDir.value.join(";"));
  } else {
    dataDir.push(path.split(/\\\\/g).join("\\"));
    setProtection("virus_dir", dataDir.join(""));
  }
};
const closeDataDir = () => {
  setProtection("virus_dir", "");
};
const closeExpDir = (index) => {
  expDir.value.splice(index, 1);
  setProtection("exp_virus_dir", expDir.value.join(";"));
};
onMounted(() => {
  if (!treeStore.treeDeviceId) {
    return;
  }
  req_getSystemConfig(treeStore.treeDeviceId, queryArr).then((res) => {
    setResultFn(res);
  });
});
watch(
  () => treeStore.treeDeviceId,
  (newVal, oldVal) => {
    if (!treeStore.treeDeviceId) {
      return;
    }
    req_getSystemConfig(newVal, queryArr).then((res) => {
      setResultFn(res);
    });
  }
);
</script>

<style lang="scss" scoped>
.setting-box{
  font-size: 16px;
  color: rgba(0,0,0,0.65);
  padding-bottom: 20px;
  :deep(.el-checkbox__label){
    font-size: 16px;
  }
  :deep(.el-checkbox){
    margin-right: 40px;
  }
}
.tag-box {
  display: inline-block;
  width: 400px;
  height: 100px;
  background: rgba(0, 0, 0, 0.1);
  padding: 10px;
}
.line-height-100 {
  line-height: 100px;
}
.tagging{
  font-size: 14px;
  color: #E2B53C;
}
.setting-title{
  display: inline-block;
  line-height: 40px;
  max-width: 144px;
  text-align: right;
  padding-right: 30px;
}
.setting-title-color{
  font-size: 18px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.85);
}
</style>
